<template>
  <div class="container">
    <div class="header">设备月度稼动率</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'

const option = {
  tooltip: {
    trigger: 'axis',
  },
  grid: commomOption.grid,
  xAxis: Object.assign({}, commomOption.xAxis, {
    data: ['1', '2', '3', '4', '5', '6', '7'],
  }),
  yAxis: commomOption.yAxis,
  series: [
    {
      data: [50, 230, 224, 218, 135, 147, 260],
      type: 'line',
      itemStyle: {
        color: 'rgba(0, 255, 228, 1)',
        borderColor: 'rgba(32, 255, 231, 1)',
        borderWidth: 2,
      },
      lineStyle: {
        width: 1,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(32, 255, 231, 0.6)',
          },
          {
            offset: 1,
            color: 'rgba(37, 188, 201, 0.06)',
          },
        ]),
      },
    },
  ],
}

// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance()
// 获取echart挂载的DOM节点
const echartsBox = ref()
// echartsf弹窗出现
function echartInit() {
  //nextTick后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)

    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}
echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
